<template>
  <!--委外数据分案历史查询-->
  <div class="divisional">
    <!-- 查询 -->
    <div class="search_box">
      <el-row :gutter="20">
        <el-form :inline="true" label-position="right" label-width="82px" :model="paramsInfo" class="demo-form-inline" ref="paramsForm">
          <el-col :span="6">
            <el-form-item label="所属分行" prop='branch'>
              <el-select v-model="paramsInfo.branch" size="small" placeholder="请选择" :disabled="branchDisable" style="width:92%">
                <el-option key="不限" label="不限" value=""></el-option>
                <el-option v-for="item in branchOptions" :key="item.code" :label="item.name" :value="item.code"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="6">
            <el-form-item label="所属支行" prop='subBranch'>
              <el-select v-model="paramsInfo.subBranch" size="small" placeholder="请选择" :disabled="subBranchDisable">
                <el-option key="不限" label="不限" value=""></el-option>
                <el-option v-for="item in subBranchOptions" :key="item.code" :label="item.name" :value="item.code"></el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
          <el-col :span="6">
            <el-form-item label="批次号" prop='batchNumber'>
              <el-input v-model.trim="paramsInfo.batchNumber" size="small"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="委外公司" prop='outsourcingCompany'>
              <el-input v-model.trim="paramsInfo.outsourcingCompany" size="small"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="客户姓名" prop='name'>
              <el-input v-model.trim="paramsInfo.name" size="small"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="身份证号" prop='identificationNumber'>
              <el-input v-model.trim="paramsInfo.identificationNumber" size="small"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="信用卡号" prop='cardNumber'>
              <el-input v-model.trim="paramsInfo.cardNumber" size="small"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="贷款合同号" prop='contractNumber'>
              <el-input v-model.trim="paramsInfo.contractNumber" size="small"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <div align="left" style="padding-top: 4px;margin-left: 47%;">
              <el-button type="primary" size="small" @click="search">查询</el-button>
              <el-button type="primary" size="small" @click="reset('paramsForm')">重置</el-button>
            </div>
          </el-col>
          <!-- <el-col :span="6">
            <el-form-item label="" prop=''>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="" prop=''>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="" prop=''>
            </el-form-item>
          </el-col>
          <el-col :span="6">

          </el-col> -->
        </el-form>

      </el-row>
    </div>
    <!-- 数据列表 -->
    <el-table v-loading="loading" element-loading-text="数据加载中" element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(212, 216, 206, 1)" :header-cell-style="{background:'LightYellow	',color:'black'}"
      :data="tableData" style="width: 100%">
      <el-table-column label="序号" type="index" align="center" :index="getIndex"></el-table-column>
      <el-table-column label="批次号" prop="batchNumber" ></el-table-column>
      <el-table-column label="委外公司" prop="outCompanyName"></el-table-column>
      <el-table-column label="姓名" prop="name" width="150px"></el-table-column>
      <el-table-column label="身份证号" prop="identificationNumber" width="150px":formatter="hidInfo"></el-table-column>
      <el-table-column label="信用卡号" prop="cardNumber" width="150px" :formatter="hidInfo"></el-table-column>
      <el-table-column label="卡类型" prop="allowType" width="150px" :formatter="cardTypeToZN"></el-table-column>
      <el-table-column label="贷款合同号" prop="contractNumber" width="150px"></el-table-column>

      <el-table-column label="逾期欠款" prop="overdueArrears" width="150px"></el-table-column>
      <el-table-column label="逾期期数" prop="numberOfOverduePeriods" width="150px"></el-table-column>

      <!-- <el-table-column fixed="right" label="操作" width="150">
        <template slot-scope="scope">
          <el-button @click="detail(scope.row)" type="text" size="small">详情</el-button>
        </template>
      </el-table-column> -->
    </el-table>

    <div class="pageBox">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="[5,10, 15,20]" :page-size="pageSize" :total="total" layout="total, sizes, prev, pager ,  next, slot, jumper">
      </el-pagination>
    </div>


    <el-dialog :visible.sync="showDetail" title="分案详情" width="70%">

      <div class="mainInfoBox">
        <div class="infoBox">
          <label>批次号:</label>
          <el-input v-model="batchNum" size="small" disabled></el-input>
        </div>
        <div class="infoBox">
          <label>委外公司:</label>
          <el-input v-model="outCompany" size="small" disabled></el-input>
        </div>
        <div class="infoBox">
          <el-button v-if="this.total2>0" type="primary" size="small" @click="exportData">导出</el-button>
        </div>
      </div>

      <el-divider content-position="left">分案详情</el-divider>
      <!-- 数据列表 -->

      <el-table v-loading="loading2" element-loading-text="数据加载中" element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(212, 216, 206, 1)" :header-cell-style="{background:'LightYellow	',color:'black'}"
        :data="listData" style="width: 100%;">
        <el-table-column label="姓名" prop="name"></el-table-column>
        <el-table-column label="性别" prop="sex"></el-table-column>
        <el-table-column label="电话" prop="phoneNumber" :formatter="hidInfo"></el-table-column>
        <el-table-column label="身份证号" prop="identificationNumber" :formatter="hidInfo"></el-table-column>
        <el-table-column label="卡号" prop="cardNumber" :formatter="hidInfo"></el-table-column>
        <el-table-column label="委外公司名称" prop="outCompanyName"></el-table-column>
        <el-table-column label="分配时间" prop="allotDate"></el-table-column>

        <el-table-column label="是否回收" prop="callbackConfirm">
          <template slot-scope="scope">
            <p v-if="scope.row.callbackConfirm=='1'">未回收</p>
            <p v-if="scope.row.callbackConfirm=='2'">已回收</p>
          </template>
        </el-table-column>

        <el-table-column label="撤回状态" prop="recallStatue">
          <template slot-scope="scope">
            <p v-if="scope.row.recallStatue=='1'">未撤回</p>
            <p v-if="scope.row.recallStatue=='2'">已撤回</p>
          </template>
        </el-table-column>



      </el-table>


      <div class="pageBox">
        <el-pagination @size-change="handleSizeChange2" @current-change="handleCurrentChange2" :current-page="currentPage2"
          :page-sizes="[5,10, 15,20]" :page-size="pageSize2" :total="total2" layout="total, sizes, prev, pager ,  next, slot, jumper">
        </el-pagination>
      </div>

    </el-dialog>
  </div>
</template>
<script>
  import {
    cmcUrl
  } from "../../../../static/baseUrl";
  const ExportJsonExcel = require('js-export-excel')
  export default {
    data() {
      return {
        branchDisable: false,
        subBranchDisable: false,
        branchOptions: [],
        subBranchOptions: [],
        paramsInfo: {
          outsourcingCompany: "",
          batchNumber: "",
          anjianState: "",
          branch: "",
          subBranch: "",
          name: "",
          identificationNumber: "",
          cardNumber: "",
          contractNumber: "",
        },
        batchNum: "",
        outCompany: "",
        stateOptions: [{
          label: "已下发",
          value: "1",
        }, {
          label: "已回收",
          value: "2",
        }],
        cardTypes: this.GLOBAL.cardTypeOptions,
        checkModelOptions: this.GLOBAL.checkModelOptions,
        loading: false,
        currentPage: 1,
        pageSize: 10,
        total: 0,
        tableData: [],

        showDetail: false,
        detailInfo: {},
        loading2: false,
        currentPage2: 1,
        pageSize2: 5,
        total2: 0,
        listData: [],
        excelTitle:['批次号','案件流水号','姓名','身份证号','卡号','卡类型','贷款合同号','开户机构','逾期欠款','逾期期数','支行机构编码','分行机构编码'],//导出excel的表头，与excelColumn，需一一对应
        excelColumn:['batchNumber','serialNumber','name','identificationNumber','cardNumber','allowType','contractNumber','accountOpeningInstitution','overdueArrears','numberOfOverduePeriods','zhiInstitution','fenInstitution'],//导出excel每列对应的数据
      }
    },
    created() {
      this.getBranchOptions();
    },
    methods: {
      //获取所有分行列表
      getBranchOptions(){
        let branch = localStorage.getItem('BRANCH');
        this.paramsInfo.branch = branch;
        let subBranch = localStorage.getItem('SUBBRANCH');
        this.paramsInfo.subBranch = subBranch;

        this.$axios({
            method: "get",
            url: `/CMC/group/listFen`,
            data: "",
          })
          .then((res) => {
            console.log("获取分行数据==",res);
            if (res.code == 200) {
              this.branchOptions = res.data;
              if(branch){
                this.branchDisable = true;
              }
              //this.getSubBranchOptions(branch);
            } else {
              console.error("获取分行出错，，",res.message);
            }
            this.search();
          })
          .catch((err) => {console.log(err)});
      },
      //根据分行获取支行列表
      getSubBranchOptions(codeStr){

        if(codeStr){
          let ttt = this.branchOptions.find((element) => (element.code == codeStr));
          this.$axios({
              method: "get",
              url: `/CMC/group/listZhiByFen?id=`+ttt.id,
              data: "",
            })
            .then((res) => {
              console.log("获取支行信息==",res);
              if (res.code == 200) {
                let subBranch = localStorage.getItem('SUBBRANCH');
                this.paramsInfo.subBranch = subBranch;
                this.subBranchOptions = res.data;
                if(subBranch){
                  this.subBranchDisable = true;
                }
                this.search();
                //this.total = Number(res.data.total);
              } else {
                console.error("获取支行出错，，",res.message);
              }
            })
            .catch((err) => {console.log(err)});
          }
      },
      withdraw(row) {
        if (row.callbackConfirm == '1' && row.recallStatue == '1') {
          this.$confirm('此操作将撤回案件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            let options = {
              batchNumber: this.batchNum,
              cardNumber: row.cardNumber,
              outsourcingCompany: this.outCompany,
            };
            this.$axios({
                method: "post",
                url: `/CMC/ourCompanyData/receiveData`,
                data: options,
              })
              .then((res) => {
                if (res.code == 200) {
                  this.$message({
                    type: 'success',
                    message: '撤回成功!'
                  });
                }
                this.detaiList();
                this.checkInfo();
              });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消撤回'
            });
          });
        } else {
          this.$notify({
            title: '警告',
            message: '案件已回收，或者，已经是撤回状态哦！',
            type: 'warning'
          });
        }
      },

      transState(row, column, cellValue, index) {
        let ttt = this.stateOptions.find((element) => (element.value == cellValue));
        return ttt ? ttt.label : "";
      },
      handleCurrentChange(data) {
        this.currentPage = data;
        this.checkInfo();
      },
      handleSizeChange(data) {
        console.log(data, "handleSizeChange");
        this.pageSize = data;
        this.checkInfo();
      },
      handleCurrentChange2(data) {
        this.currentPage2 = data;
        this.detaiList();
      },
      handleSizeChange2(data) {
        this.pageSize2 = data;
        this.detaiList();
      },
      formatCheckModel(row) {
        let vv = row.checkModel;
        let ttt = this.checkModelOptions.find((element) => (element.value == vv));
        return ttt ? ttt.label : "";
      },
      getIndex(index) {
        index = (index + 1) + (this.currentPage - 1) * this.pageSize;
        return index;
      },
      getIndex2(index) {
        index = (index + 1) + (this.currentPage2 - 1) * this.pageSize2;
        return index;
      },
      search() {
        this.currentPage = 1;
        this.checkInfo()
      },
      reset(formRef) {
        this.$refs[formRef].resetFields();
      },
      //主页面列表数据
      checkInfo() {
        this.$set(this.paramsInfo, "page", this.currentPage);
        this.$set(this.paramsInfo, "pageSize", this.pageSize);
        this.loading = true;
        this.$axios({
            method: "post",
            //url: `/CMC/company/commission/list`,
            url: `/CMC/ReconciliationCommission/ReconciliationCommissionList`,
            data: this.paramsInfo,
          })
          .then((res) => {
            this.loading = false;
            console.log(res, "数据详情");
            if (res.code == 200) {
              this.tableData = res.data.list;
              this.total = Number(res.data.total);
            } else {
              console.error(res.message);
            }

          })
          .catch((err) => {
            console.log(err)
          });
      },
      //详情
      detail(row) {
        this.showDetail = true;
        this.loading2 = true;
        this.currentPage2 = 1;
        this.batchNum = row.batchNumber;
        this.outCompany = row.outsourcingCompany;
        this.detaiList();
      },
      //详情页面案件列表数据
      /* 12345*/
      detaiList() {
        let optionss = {
          batchNumber: this.batchNum,
          outCompanyName: this.outCompany,
          pageNum: this.currentPage2,
          pageSize: this.pageSize2
        };
        this.$axios({
            method: "post",
            url: `/CMC/ReconciliationCommission/ReconciliationCommissionList`,
            data: optionss,
          })
          .then((res) => {
            this.loading2 = false;
            console.log(res, "数据详情");
            if (res.code == 200) {
              this.listData = res.data.list;
              this.total2 = Number(res.data.total);
            } else {
              console.error(res.message);
            }

          })
          .catch((err) => {
            console.log(err)
          });
      },
      cardTypeToZN(row,column,cellValue,index){

        let ttt = this.cardTypes.find((element) => (element.value == cellValue));

        return ttt ? ttt.label : cellValue;
      },

      //导出数据
      exportData(){

        let msg="导出当前委外公司的分案数据?";
        //let removeid = data.id;
        this.$confirm(msg,"提示",{
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'success'
          }).then(()=>{
            this.exportExcel();

          }).catch((err) => {console.log("err",err)});
      },
      exportExcel(){
        let options = {
          batchNumber: this.batchNum,
          outCompanyName: this.outCompany,
          page: 1,
          pageSize: this.total2,
        };
        this.$axios({
           method: "post",
           url: `/CMC/ReconciliationCommission/ReconciliationCommissionList`,
           data: options,
          })
          .then((res) => {
            console.log(res, "导出数据");
            if (res.code == 200) {
              let totalData = res.data.list;

              Object.keys(totalData).forEach((item) => {
                console.log("totalData==item=",item,"......,",totalData[item]);

                let ttType = totalData[item].allowType;
                let typeStr = this.cardTypeToZN(null, null,ttType,null);
                this.$set(totalData[item], "allowType", typeStr);
              });

              let option={};
              option.fileName = this.batchNum +'-'+this.outCompany;

              option.datas=[
                {
                  sheetData: totalData,
                  sheetName: '分案数据',
                  sheetFilter: this.excelColumn,
                  sheetHeader: this.excelTitle,
                  columnWidths: [10,10,20,10]//对应的列宽，置为屏宽的百分比，40%
                },
              ];
              var toExcel=new ExportJsonExcel(option);
              toExcel.saveExcel();

            } else {
              console.error(res.message);
            }
          })
          .catch((err) => {console.log(err)});
        },

    }
  }
</script>
<style lang="scss" scoped>

  .divisional {

    .search_box {
      background: #fff;
      border-radius: 10px;
      padding: 40px 40px 25px 40px;
      margin: 0 0 20px 0;
    }

    .pageBox {
      display: flex;
      width: 100%;
      justify-content: left;
      margin-top: 10px;
    }

    /deep/ .el-dialog {
      .mainInfoBox {
        width: 100%;
        max-height: 60vh;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: wrap;
        overflow-y: auto;

        .infoBox {
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          height: 40px;
          width: 30%;

          label {
            width: 100px;

            margin-right: 5px;
          }

          .el-input {
            flex: 1 1 auto;
          }
        }
      }
    }

  }



</style>
